<script setup lang="jsx">

import {computed, defineEmits, defineProps, onBeforeMount, ref} from 'vue'
import GameRecordHomePage from "@/renderer/main-window/components/gamerecord/GameRecordHomePage.vue";
import LcuTierIcon from "@share/components/lcu/LcuTierIcon.vue";
import LcuProfile from "@share/components/lcu/LcuProfile.vue";
import LcuSummonerName from "@share/components/lcu/LcuSummonerName.vue";
import FriendOffline from "@share/components/common/icons/FriendOffline.vue";
import {ElMessage} from "element-plus";
import {displayRankTypeList, rankQueueMap, tierMap} from "@/renderer/share/utils/constants.js";
import CareerHiddenDisplay from "@/renderer/share/components/lcu/CareerHiddenDisplay.vue";

const pageSize = 10;

const {summonerInfo, summonerProfileInfo,displayInOverview} = defineProps({
  "summonerInfo": {},
  "summonerProfileInfo": {},
  "displayInOverview":{
    default:false,
  }
})

const emit = defineEmits([
  'jumpSummonerHomePage',//跳转到其他玩家的主页
])

const gameRecordList = ref([]);

const searchGameRecordFunc = () => {
  listIsLoading.value = true;

  const begIndex = (currentPage.value - 1) * pageSize;
  const endIndex = (currentPage.value) * pageSize - 1;

  window.api.gamereocrd.searchByPuuid({"puuid": summonerInfo.puuid, begIndex, endIndex})
      .then(res => {
        listIsLoading.value = false;
        currentPage.value = currentPage.value + 1;
        (res.data?.games?.games ?? []).forEach(item => {
          gameRecordList.value.push(item);
        })
      }).catch(err => {
    listIsLoading.value = false;
    ElMessage.error({
      message: `拉取战绩异常:${err.message}`
    })
  })
}
//当前战绩的页码 每页10条
const currentPage = ref(1);
const listIsLoading = ref(false);
const loadDataFunc = () => {
  searchGameRecordFunc()
}

const totalRankInfo = ref({});
const displayRankList = computed(() => {
  if (totalRankInfo.value === undefined || Object.keys(totalRankInfo.value).length === 0) {
    return [];
  }
  return displayRankTypeList.map((type) => {
    return totalRankInfo.value?.queueMap[type]
  });
})

onBeforeMount(() => {
  loadDataFunc();
  window.api.rank.getRankedListByPuuid(summonerInfo?.puuid).then(res => {
    totalRankInfo.value = res.data;
  });
})

const rankCards =()=> {
  return(
     <div class="rank_card_container">
       {(displayRankList.value).map((item,idx)=>{
        return <el-card
             shadow="hover"
             style="margin: 0 24px 12px 0">
           <div class="tier_wrapper" style="display: flex;justify-content: space-between;align-items: center;text-align: center;">
             <el-text size="default">
               { rankQueueMap[item.queueType] }
             </el-text>
             <div>
               <LcuTierIcon size="120" tier-level={tierMap[item.tier||'None']?.icon}/>
               <br/>
                 <el-text size="small">{ tierMap[item.tier || 'None']?.value }</el-text>
                 <el-text size="small">{ item.division || '' }</el-text>
                 <el-text size="small" style="margin-left: 3px"> { item.leaguePoints }胜点</el-text>
             </div>
             <div style="">
               <el-text>{ item.wins}胜 / { item.losses }负</el-text>
               <br/>
                 <br/>
                   <el-text>{ (((item.wins) / (item.wins + item.losses)) * 100).toFixed(0) }%胜率</el-text>
             </div>
           </div>
         </el-card>
       })}
     </div>
  )
}

</script>

<template>

  <div style="width: 100%;overflow: auto">
    <!--    顶部个人信息栏-->
    <div style="margin-left: 60px;display: flex;justify-content: flex-start;align-items: center">
      <LcuProfile
          :percentage="summonerInfo.percentCompleteForNextLevel||0"
          :show-progress="true"
          :summoner-level="summonerInfo.summonerLevel"
          shape="circle" :size="120" :profile-id="summonerInfo?.profileIconId"/>
      <div class="summoner_info_wrapper">
        <LcuSummonerName :name="summonerInfo.gameName" :num="summonerInfo.tagLine">
          <template #default={summonerName,tagLine}>
            <el-text size="large">{{ summonerName }}</el-text>
            <el-text type="info">#{{ tagLine }}</el-text>
          </template>
        </LcuSummonerName>
<!--        <div style="display: flex">-->
<!--          <el-text>状态:</el-text>-->
<!--          <FriendOffline style="margin: 0 3px"/>-->
<!--          <el-text> 离线</el-text>-->
<!--        </div>-->
        <CareerHiddenDisplay style="width: 60px;height: 30px" :hidden-code="summonerInfo.privacy"/>
      </div>
      <template v-if="displayInOverview">
        <div style="flex-grow: 1"></div>
        <rankCards style="display: flex;justify-self: flex-end"/>
      </template>

    </div>
    <el-divider/>
    <el-splitter>
      <el-splitter-panel size="320px" min="300px" v-if="!displayInOverview">
        <rankCards/>
      </el-splitter-panel>
      <el-splitter-panel>
        <div class="game_record_container">
          <ul
              style="overflow: auto;list-style: none;padding:0 12px;margin:0;">
            <li v-for="item in gameRecordList" :key="item.gameId">
              <GameRecordHomePage
                  @jumpSummonerHomePage="args => {emit('jumpSummonerHomePage',args);}"
                  :recordInfo="item"
                  :summoner-info="summonerInfo"
              >
              </GameRecordHomePage>
            </li>
            <el-button v-loading="listIsLoading" @click="loadDataFunc" style="width: 100%">加载更多</el-button>
          </ul>

        </div>

      </el-splitter-panel>
    </el-splitter>

    <el-backtop :right="120" :bottom="100" target=".twist-main-container"/>
  </div>

</template>

<style scoped lang="scss">
.tier_wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: center;
}

.summoner_info_wrapper {
  //display: inline-block;
  //position: relative;
  //bottom: 30px;
  //left: 24px;
  margin-left:24px;

  & > div {
    margin-top: 12px;
  }
}

.game_record_container {

}
.rank_card_container{
  :deep(.el-card__body){
    padding: 3px
  }
}
</style>